/<template>
  <div>
    <main>
      <div class="method">
        <el-input v-model="input" placeholder="姓名或账户"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="openDialog">添加</el-button>
      </div>
      <div class="content">
        <span>姓名</span>
        <span>账户</span>
        <span>性别</span>
        <span>描述信息</span>
        <span>修改日期</span>
        <span>操作</span>
      </div>
      <div v-for="(item, index) in searchData" :key="index" class="content">
       
        <span>{{ item.name }}</span>
        <span>{{ item.user }}</span>
        <span>{{ item.sex }}</span>
        <span>{{ item.info }}</span>
        <span>{{ item.date }}</span>
        <span>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delData(item.id)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editData(item.id)"
          ></el-button>
        </span>
      </div>
    </main>
    <Dialog
      :handleClose="handleClose"
      :dialogVisible="dialogVisible"
      :closeDialog="closeDialog"
      :formvalues="formvalues"
    ></Dialog>
  </div>
</template>

<script>
import Dialog from "../../components/Dialog.vue";
import { mapState, mapMutations, mapActions } from "vuex";
import "../../utils/Data";
export default {
  data() {
    return {
      input: "",
      dialogVisible: false,
      searchData: [],
      checked: false,
      formvalues: {
        name: "",
        user: "",
        sex: "",
        info: "",
        date: "",
      },
    };
  },
  computed: {
    ...mapState(["listArr"]),
  },
  created() {
    this.searchData = this.listArr;
  },
  components: {
    Dialog,
  },
  methods: {
    ...mapMutations(["addData"]),
    openDialog() {
      this.dialogVisible = true;
      this.formvalues = {};
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    search() {
      this.searchData = this.listArr.filter((item) => {
        return item.name.includes(this.input) || item.user.includes(this.input);
      });
    },
    // 全选
    CHECKED() {
      this.$store.commit("allchecked", this.checked);
      console.log(this.checked);
    },
    // 单选 反选
    checkeditem(id) {
      console.log(id, "====");
      this.$store.commit("checkeditem", id);
      this.checked = this.$store.state.Allchecked;
    },
    // 删除选中数据
    delchecked() {
      this.$store.commit("delchecked");
    },
    // 删除数据
    delData(id) {
      console.log(id);
      this.$store.commit("delData", id);
    },
    // 编辑数据
    editData(id) {
      console.log(id);
      this.dialogVisible = true;
      this.$store.commit("getinfo", id);
      this.formvalues = this.$store.state.infodata;
      console.log(this.$store.state.infodata);
    },
  },
};
</script>

<style lang="scss">
header {
  width: 100%;
  height: 50px;
}
.el-input {
  width: 40%;
}
.content {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;

  span {
    width: 100px;
    line-height: 30px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    .el-button {
      width: 100px;
      text-align: center;
    }
  }
}
</style>